<template>
  <div style="position: relative;height: 100%;">
    <div class="extraImg">
      <div v-if="GetUserGradeProfit.GradeExtraProfit[mapVal.num-1]>0">
        <img src="../../assets/icon-list-extra.svg" alt="">
        <span>{{utils.weiOneth(GetUserGradeProfit.GradeExtraProfit[mapVal.num-1])}} ETH</span>
      </div>
      <div v-if="GetUserGradeProfit.GradeLostedProfit[mapVal.num-1]>0 && mapVal.num > level">
        <img src="../../assets/icon-list-warn.svg" alt="">
        <span class="fontfff">{{utils.weiOneth(GetUserGradeProfit.GradeLostedProfit[mapVal.num-1])}} ETH</span>
      </div>
    </div>   
    <div class="plan-buy" v-if="mapVal.num > level">
      <div>
        <div>{{mapVal.num}}</div>
        <!-- <div class="losedSty" v-if="mapVal.num == Number(level)+1 && mapVal.losed>0">
          <img src="../../assets/icon-list-warn.svg" alt="">
          <span>{{mapVal.losed}} ETH</span>
        </div> -->
      </div>
      <div>{{mapVal.money}}ETH</div>
      <div @click="Upgrade" :class="(mapVal.num != Number(level)+1) || checkedId?'opacity3':''">
        <img src="../../assets/icon-list-buy.svg" alt="">
        <span>{{$t('user.buy')}}</span>
      </div>
    </div>
    <div class="plan-home" v-else>
      <div class="plan-top">
        <div>{{mapVal.num}}</div>
      </div>
      <div v-if="!editTextMenu">{{$t('user.Welcomemetaboard')}}</div>
      <div v-else>{{editTextMenu}}</div>
      <div @click="edit" :class="checkedId || editTextMenu?'opacity3':''">
        <img src="../../assets/icon-edit.svg" alt="">
        <span>{{$t('user.editText')}}</span>
      </div>
      <div>
        <div>
          <div>
            <img src="../../assets/icon-partner.svg" alt="">
            <span>{{billBoardNum[mapVal.num-1]}}</span>
          </div>
          <div>
            <img src="../../assets/icon-profit.svg" alt="">
            <span>{{utils.weiOneth(GetUserGradeProfit.GradeProfit[mapVal.num-1])}}</span>
          </div>
        </div>
      </div>
    </div>
    <popup v-if="showpopup" :data="dataProp" @close="close" @submit="submit"></popup>
  </div>
  </template>
  
  <script>
    import Web3 from 'web3'
    import popup from './popup'
  export default {
    name: 'metaPlant',
    data () {
      return {
        showpopup:false,
        dataProp:{type:1,money:0,level:0},
        checkedId:'',
        billboardContent:'',
      }
    }, 
    props:['mapVal','level','GetUserGradeProfit','editTextMenu','id','billBoardNum'],
    components:{popup},
    mounted() {
      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {
          web3 = new Web3(new Web3.providers.HttpProvider(this.utils.HttpProviderIp));
      }
      if(this.$route.params.id){
        this.checkedId = this.$route.params.id;
      }    
      this.dataProp.money = this.mapVal.money;
      this.dataProp.level = this.mapVal.num;
    },
    methods: {
      //编辑广告位
      edit(){
        this.dataProp.type = 3;
        this.showpopup = true;
      },
      //关闭弹框
      close(data){
        this.showpopup = false;
      },
      //升级
      async submit(data){
        var that = this;
        that.showpopup = false;
        ethereum.enable().then(accounts => {
          const account = accounts[0];                 
          if(localStorage.getItem('levelType'+account) && localStorage.getItem('levelType'+account)  == that.level+1){
            that.$message.info(that.$t('user.partner_d1'));
          }else{ 
            var contractAbi = that.utils.tranAbi;
            var contractAddress = that.utils.addressVal;  //合约地址        
            if(data.type == 1){
              var myContract = new web3.eth.Contract(contractAbi, contractAddress, {
                  from: account, // default from address
                  // gasPrice: '2000000000', // default gas price in wei, 10 gwei in this case
                  // gas: '0x1000000', // customizable by user during MetaMask confirmation.
              });
              myContract.methods.Upgrade().send({
                from: account,
                value:'0x'+(Math.pow(2, that.level)*that.utils.ethNum).toString(16),
              },function(error, result){
                if(result){
                  localStorage.setItem('levelType'+account,that.level+1);
                  that.$emit('jumpSuc',result);
                }
                if(error){
                  that.$message.info(that.$t('user.Transactionfailure'));
                }
              });
            }else{
              var time = (new Date()).valueOf();
              that.$http.post(that.utils.config+'/metapool/ad/pk_edit',{timestamp:time,id:that.id,pk:account,token:that.$md5(account+that.mapVal.num+'WwFEhq4hgK4yBtWmtKYMvyea95'+time),level:that.mapVal.num,content:data.textareaVal}).then((res)=>{
                that.$emit('loadEdit',account);
              })
            }
          }
        })
      },
      Upgrade(){     
        this.showpopup = true;
      }
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
    .opacity3{
      opacity: .3;
      pointer-events: none!important;
    }
    .buyDisabled{
      pointer-events: none;
      opacity: .5;
    }
    .plan-home{
      width: 100%;
      height: 100%;
      background-color: #EFB133;
      border-radius: 10px;
      padding: 20px;
      font-size: 16px;
      color: #000;
      margin-bottom: 10px;
      position: relative;
      >.plan-top{
        display: flex;
        justify-content: space-between;
        color: rgba(0, 0, 0, .6);
        padding-bottom: 34px;
        img{
          width: 24px;
        }
      }
      >div:nth-child(2){
        font-weight: bold;
        margin-bottom: 6px;
      }
      >div:nth-child(3){
        margin-bottom: 40px;
        cursor: pointer;
        img{
          width: 10px;
          margin-right: 5px;
          position: relative;
          top: 7px;
        }
        span{
          font-size: 14px;
          color: rgba(0, 0, 0, .6);
        }
      }
      >div:nth-child(4){
        /* display: flex;
        justify-content: space-around; */
        width: 100%;
        position: absolute;
        bottom: 20px;
        left: 0px;
        >div{
          margin: 0px auto;
          display: flex;
          justify-content: space-around;
          >div{
            line-height: 30px;
            /* margin-left: 174px; */
            img{
              width: 30px;
              margin-right: 3px;
            }
          }
          /* >div:nth-child(1){
            margin-left: 70px;
          } */
        }
      }
    }
    .extraImg{
      position: absolute;
      right: 10px;
      top: 10px;
      display: flex;
      font-size: 16px;
      color: #000;
      >div:nth-child(1){
        margin-right: 20px;
      }
      >div>img{
        margin-right: 4px;
      }
    }
    .plan-buy{
      width: 100%;
      height: 100%;
      background-color: #171717;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 10px;
      >div:nth-child(1){
        font-size: 16px;
        color: rgba(255, 255, 255, .6);
        margin-bottom: 25px;
        text-align: left;
        position: relative;
        .losedSty{
          position: absolute;
          right: 0px;
          top: 0px;
          >span{
            margin-left: 5px;
            color:#EFB133;
          }
        }
      }
      >div:nth-child(2){
        margin-bottom: 20px;
      }
      >div:nth-child(3){
        width: 96px;
        height: 30px;
        margin: 0 auto;
        line-height: 30px;
        border: 1px solid #EFB133;
        border-radius: 6px;
        padding: 7px 18px;
        font-size: 14px;
        color: #EFB133;
        margin-bottom: 52px;
        cursor: pointer;
        img{
          width: 18px;
          position: relative;
          top: -2px;
          margin-right: 4px;
        }
        span{
          position: relative;
          top: -7px;
        }
      }
    }
  </style>
  